<template>
  <div class="goods">
    <!-- 搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.user" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearchFn">查询</el-button>
        <el-button type="primary" @click="onAddGoods">添加</el-button>
        <el-button type="primary" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
    <el-table :data="data" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="retail_price" label="售价"> </el-table-column>
      <el-table-column prop="goods_number" label="库存"> </el-table-column>
      <el-table-column prop="retail_price" label="新品">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.is_new == 1 ? "是" : "否"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="人气">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.is_hot == 1 ? "是" : "否"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="上架">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.is_on_sale == 1 ? "是" : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort_order" label="排序"> </el-table-column>
      <el-table-column label="操作" prop="id">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(`${scope.row.id}`)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1111"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getUserByToken,
  getGoodLists,
  getGoodInfo,
  getBrandLists,
  getCategoryLists,
  getAttributeLists,
} from "../../request/httpApi";

export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      //商品列表数据
      data: [],
      //页数
      totalcount: "",
      //分页
      currentPage1: 1,
    };
  },

  created() {
    //获取用户信息
    getUserByToken().then((res) => {
      // console.log(res);
    }),
      this.getAjax(1, 10);
  },
  methods: {
    //添加
    onAddGoods() {
      this.$router.push("/addgood/");
    },
    //这个是查询
    onSearchFn() {
      // console.log(111);
      // console.log(id);
      // console.log(this.formInline.user);
      this.getAjax(1, 10, this.formInline.user);
    },
    //重置
    onReset() {
      this.formInline.user = "";
      // console.log("tianjia ");
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      //   this.getAjax()
    },
    handleCurrentChange(val) {
      // console.log(val);
      //   console.log(`当前页: ${val}`);
      this.getAjax(val, 10);
    },

    //发送请求
    getAjax(page, size, name) {
      getGoodLists({
        page,
        size,
        name,
      }).then((res) => {
        // console.log(res);
        if (res.errno == 0) {
          // console.log(res.data.data);
          // let { data } = res.data;
          this.data = res.data.data;
          this.totalcount = res.data.count;
        }
      });
    },
    //点击编辑, 跳转到编辑页面
    handleEdit(val) {
      //拿到id
      // console.log(val);
      //发送商品信息请求
      getGoodInfo({ id: val }).then((res) => {
        // console.log(res);
      });
      //发送查询品牌列表请求
      getBrandLists({ size: 100 }).then((res) => {
        // console.log(res);
      });
      //发送分类请求
      getCategoryLists({ size: 100 }).then((res) => {
        // console.log(res);
      });
      //发送属性请求
      getAttributeLists({ size: 1000 }).then((res) => {
        // console.log(res);
      });

      this.$router.push("/editgood/" + val);
    },
  },
};
</script>

<style lang="less">
.goods {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff;
  .paging {
    padding-top: 10px;
    padding-bottom: 10px;
    float: right;
  }
}
</style>